<template>
    <div class="main-container">
        <x-header style="background: #34bd7ed1" :right-options="{showMore: true}"
                  :left-options="{backText: '',color:'#fff'}">健康主页
        </x-header>
        <div class="vux-container">
            <swiper :list="swiperList" dots-position="center"></swiper>
            <div>
                <group-title class="group-title">数据查询</group-title>
                <grid :cols="2" :show-lr-borders="false">
                    <grid-item v-for="item in  gridList" :key="item.title" style="padding: 20px 0"  @on-item-click="goLink">
                        <flexbox>
                            <flexbox-item :span="3">
                                <div class="grid-title">
                                    <i :class="[iconfont ,item.icon]"></i>
                                </div>
                            </flexbox-item>
                            <flexbox-item>
                                <div class="grid-text">{{item.title}}</div>
                            </flexbox-item>
                        </flexbox>
                    </grid-item>
                </grid>
            </div>
        </div>
    </div>
</template>


<script>
    import {Group, Cell, XHeader, Swiper, Grid, GridItem, GroupTitle, Icon, Flexbox, FlexboxItem} from 'vux'
    export default {
        components: {
            Swiper,
            XHeader,
            Group,
            Grid,
            Flexbox,
            FlexboxItem,
            GroupTitle,
            Icon,
            GridItem,
            Cell,
        },
        data() {
            return {
                // note: changing this line won't causes changes
                // with hot-reload because the reloaded component
                // preserves its current state and we are modifying
                // its initial state.
                iconfont:'iconfont',
                msg: 'Hello World!',
                swiperList: [
                    {
                        url: 'javascript:',
                        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
                        title:'测试banner1'
                    }, {
                        url: 'javascript:',
                        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
                        title:'测试banner2'
                    }
                ],
                gridList: [
                    {
                        title: "就诊记录",
                        icon: "iconbingzhi-copy",
                    }, {
                        title: "预约挂号",
                        icon: "iconyijian",
                    }, {
                        title: "报告查询",
                        icon: "iconhuanzhegoutong",
                    }, {
                        title: "健康证明",
                        icon: "iconjingshenxinlike",
                    }, {
                        title: "门诊费用",
                        icon: "iconwodegongzuoshi",
                    }, {
                        title: "中医体质",
                        icon: "iconzhongyike",
                    }
                ]
            }
        },
        methods: {
            goLink () {
                this.$router.push('/List');
            }
        }
    }
</script>

<style>
    .main-container{
        width: 100vw;
        height: 100vh;
        background: url("../../static/image/bg.png") repeat-y;
        background-size: contain;

    }
    .vux-container {
        margin: 10px;
    }

    .group-title {
        padding: 20px 0 10px 0;
    }

    .grid-title {
        text-align: center;
    }

    .grid-text {
        color: gray;
    }

    .vux-icon-dot.active {
        background-color: #34bd7ed1;
        width: 12px !important;
    }

    .iconfont{
        color: #34bd7ed1;
        font-size: 20px;
    }

    .vux-slider {
        overflow: visible !important;
    }

    .vux-slider > .vux-indicator {
        bottom: -40px !important;
    }

    .vux-header .vux-header-right > a {
        color: #fff !important;
    }

    .vux-header .vux-header-left .left-arrow:before {
        border-color: #fff !important;

    }
</style>
